<template>
  <div>
    <div class='square'>
      <div class="top"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="left"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Helloworld"
}
</script>

<style scoped>
.square {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  transition: all 1s;
}
.top,
.left,
.right,
.bottom {
  position: absolute;
  height: calc(100% / 1.414);
  width: calc(100% / 1.414);
  top: 50%;
  left: 50%;
  transform-origin: 0% 0%;
}
.right {
  background-color: dodgerblue;
  transform: rotate(-45deg);
}
.bottom {
  background-color: aquamarine;
  transform: rotate(45deg);
}
.top {
  background-color: pink;
  transform: rotate(-135deg);
}
.left {
  background-color: orange;
  transform: rotate(135deg);
}
</style>
